////
/// Components
/// Button
////

@import 'utils/shared/layout';

.Button {
  display: inline-block;
  padding: get-spacing(tightest);
  font-size: get-type-scale(button);
  font-weight: get-type-scale(button, weight);
  text-align: center;
  white-space: nowrap;
  color: get-color(coal, dark);
  background-color: white;
  border: 0.4rem solid get-color(coal, dark);
  transition: color get-duration() get-easing(), background-color get-duration() get-easing(),
    border-color get-duration() get-easing();

  @media screen and (min-width: get-breakpoint(tablet)) {
    padding-right: get-spacing(tighter);
    padding-left: get-spacing(tighter);
    font-size: get-type-scale(button, tablet);
  }

  &:focus,
  &:hover {
    color: get-color(brand, blue);
    border-color: get-color(brand, blue);
  }

  &:active {
    color: darken(get-color(brand, blue), 10%);
    border-color: get-color(brand, blue);
  }

  &:disabled {
    pointer-events: none;
    color: get-color(ash);
    border-color: get-color(ash);
  }
}

///
/// Button container
.ButtonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: -(get-spacing(tightest));
  margin-left: -(get-spacing(tightest));

  .Button {
    @include flex-item-fix;
    display: block;
    flex: 0 0 auto;
    margin-top: get-spacing(tightest);
    margin-left: get-spacing(tightest);
  }
}

///
/// Variants
@import 'variants';
